<template>
  <div>
    <!-- <client-only> -->
    <ClientOnly>
      <p>关于我们页面{{ $route.query.id }}</p>
      <vue-qr :text="vueqrValue" :size="100" :margin="0"></vue-qr>
      <p @click="diago">弹框</p>
      <video controls style="width:30%;height:10%">
        <source :src="sourceURL" type="video/mp4">
      </video>

      <!-- </client-only> -->
      <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
        <span>This is a message</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
          </span>
        </template>
      </el-dialog>
    </ClientOnly>
  </div>
</template>
  
<script setup>
const runtimeConfig = useRuntimeConfig();
const { apiBaseUrl } = runtimeConfig.public;
const route = useRoute();
const vueqrValue = ref("http://fymvp.com/")
console.log("携带参数", route.query.id)
const dialogVisible = ref(false)
const sourceURL = "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4"

const { $vueqr, $message } = useNuxtApp()
const vueQr = $vueqr;
console.log('vueQr', vueQr)

const userInfo = useUserStore().userInfo
console.log("userInfo", userInfo)
// console.log("apiBaseUrl",apiBaseUrl)

// fetch(apiBaseUrl+'/getTenArticleList')
//   .then(response => response.json())
//   .then(data => console.log("fetch-getabout-data",data));

//   $fetch(apiBaseUrl+'/getTenArticleList')
//   .then(res => {
//     console.log("$fetch-getabout-data",res)
//   })

const diago = () => {
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
}




</script>
  
<style lang="less" scoped></style>